import { Http } from '../../Api'
import { useState, memo } from 'react'
import { useRequest } from 'ahooks'
import { Button, Tooltip, DatePicker } from 'antd'
import { DrawingBed } from '../../Configure/CommonParameter'
import { Video } from '../../Configure/Video'
import qs from 'qs'
import dayjs from 'dayjs'

const { RangePicker } = DatePicker

const ModalVideo = memo(({ data, playback }) => <Video data={data} playback={playback} />)
// 摄像头云台控制
export const PanTiltControl = ({ data }) => {
    const { runAsync: Start } = useRequest(Http, {
        manual: true,
        onSuccess: res => {},
    })
    const { runAsync: Stop } = useRequest(Http, { manual: true })

    const [directionList] = useState([
        { uuid: '1', title: '' },
        { uuid: '2', title: '上', placement: 'bottom', direction: '0' },
        { uuid: '3', title: '' },
        { uuid: '4', title: '左', placement: 'right', direction: '2' },
        { uuid: '5', title: '' },
        { uuid: '6', title: '右', placement: 'left', direction: '3' },
        { uuid: '7', title: '' },
        { uuid: '8', title: '下', placement: 'top', direction: '1' },
        { uuid: '9', title: '' },
    ])

    const [ScaleList] = useState([
        { uuid: '1', title: '缩小', placement: 'top', direction: '9' },
        { uuid: '2', title: '放大', placement: 'bottom', direction: '8' },
        { uuid: '3', title: '远焦距', placement: 'top', direction: '11' },
        { uuid: '4', title: '近焦距', placement: 'bottom', direction: '10' },
    ])

    const [StateNumber, setStateNumber] = useState()

    const PanOptions = direction => {
        const StopData = { accessToken: data.token, deviceSerial: data.deviceSerial, channelNo: data.channelNo }
        const StartData = {
            accessToken: data.token,
            deviceSerial: data.deviceSerial,
            channelNo: data.channelNo,
            speed: 1,
            direction,
        }
        Stop({ url: 'posEzvizStop', data: qs.stringify(StopData) }).then(() => {
            if (StateNumber !== direction) {
                Start({ url: 'posEzvizStart', data: qs.stringify(StartData) })
                setStateNumber(direction)
            } else {
                setStateNumber()
            }
        })
    }

    return (
        <div className="PanTiltControl">
            <ModalVideo data={data} />
            <div className="Options">
                <div>云台操控</div>
                <div>
                    <div>
                        <img src={DrawingBed + 'PanTiltControl.png'} alt="" />
                        <div className="Top">
                            {directionList.map(({ uuid, title, placement, direction }) => (
                                <Tooltip key={uuid} title={title} placement={placement}>
                                    <div
                                        onClick={() => {
                                            if (direction) PanOptions(direction)
                                        }}
                                    />
                                </Tooltip>
                            ))}
                        </div>
                        <div className="Btm">
                            {ScaleList.map(({ uuid, title, placement, direction }) => (
                                <Tooltip key={uuid} title={title} placement={placement}>
                                    <div
                                        onClick={() => {
                                            if (direction) PanOptions(direction)
                                        }}
                                    />
                                </Tooltip>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
// 萤石摄像头回放
export const PanPlaybackVideo = ({ data }) => {
    const [Date, setData] = useState([])
    const [playback, setPlayback] = useState()
    const Submit = () => {
        if (Date.length !== 0) {
            const [begin, end] = Date
            setPlayback(`&begin=${dayjs(begin).format('YYYYMMDDHHmmss')}&end=${dayjs(end).format('YYYYMMDDHHmmss')}`)
        } else {
            setPlayback('')
        }
    }

    return (
        <div className="PanPlaybackVideo">
            <div>
                <RangePicker showTime allowClear={false} bordered={false} onChange={setData} />
                <Button type="primary" onClick={Submit}>
                    确认
                </Button>
            </div>

            <div>
                <ModalVideo data={data} playback={playback} />
            </div>
        </div>
    )
}
